// webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const webpack = require("webpack");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const ConsoleLogOnBuildWebpackPlugin = require("./util/log-done-plugin");
const SizePlugin = require('./util/size-plugin');
const VersionPlugin = require("./util/version-plugin");

module.exports = {
  mode: "production",

  entry: "./src/index.js", // 入口文件路径

  output: {
    path: path.resolve(__dirname, "dist"), // 输出目录
    filename: "[name].[hash:8].js", // 输出文件名
  },

  module: {
    rules: [
      {
        test: /\.m?js$/, // 匹配 .js 或 .mjs 后缀的文件
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
        },
      },

      // CSS 加载器配置
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          // "style-loader",
          "css-loader",
        ],
      },

      // {
      //   test: /\.(gif|png|jpe?g|svg)$/, // 匹配图片文件的正则表达式
      //   use: [
      //     {
      //       loader: "file-loader",
      //       options: {
      //         name: "[name].[ext]", // 输出的文件名格式
      //         outputPath: "images/", // 输出的文件路径
      //       },
      //     },
      //   ],
      // },

      {
        test: /\.(png|jpg|gif)$/, // 匹配图片文件
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 1024 * 1024, // 文件大小阈值（字节），小于此值会被转换为DataURL
              name: "[name].[hash:8].[ext]", // 输出的文件名格式
              outputPath: "imgs/", // 输出目录
              // publicPath: "/cdn/images/", // 公共资源路径
            },
          },
        ],
      },

      // custom-loader
      {
        test: /.txt$/,
        use: [
          {
            loader: path.resolve(__dirname, "util/txt-loader.js"),
          },
        ],
      },
    ],
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html", // HTML 模板文件路径
    }),

    new CleanWebpackPlugin(),

    new webpack.DefinePlugin({
      ENV: JSON.stringify("production"), // 定义一个 NODE_ENV 常量
      APP_VERSION: JSON.stringify("1.0.0"), // 定义一个自定义常量
      CHANNEL: JSON.stringify("广场舞群专属渠道"),
    }),

    new MiniCssExtractPlugin({
      filename: "css/[name].[hash:8].css", // 输出的文件名格式
    }),

    new ConsoleLogOnBuildWebpackPlugin(),

    new SizePlugin(),

    new VersionPlugin({ version: '3.0.3' })
  ],

  // ....其他配置
  optimization: {
    splitChunks: {
      chunks: "all", // 将所有模块进行分割，包括同步和异步模块
      // minSize: 30000, // 设置被拆分模块的最小体积，单位是字节
      // maxSize: 0, // 设置被拆分模块的最大体积，0 表示无限制
      minChunks: 1, // 被共享的模块至少需要被多少个 chunk 使用才会被拆分
      // maxAsyncRequests: 5, // 按需加载的文件并行请求的最大数量
      // maxInitialRequests: 3, // 入口文件最大并行请求数量
      // automaticNameDelimiter: '~', // 生成块名称的分隔符
      // name: true, // 根据模块和缓存组自动生成块名称
      cacheGroups: {
        common: {
          name: "common",
          test: /[\\/]util[\\/]/, // 匹配来自 node_modules 目录的模块
          priority: 10, // 优先级，决定拆分的顺序
          minChunks: 1,
          minSize: 0,
        },
      },
    },
  },

  // 其他配置选项...
  devServer: {
    port: 8080, // 指定服务器端口号
    open: true, // 自动打开浏览器
    // 更多配置选项...
    hot: true,

    proxy: {
      "/cdn": {
        target: "https://lekuzhima.club/cdn", // 后端 API 服务器地址
        pathRewrite: { "^/cdn": "" }, // 可选的路径重写规则
        changeOrigin: true, // 可选，是否改变源地址
      },
    },
  },
};
